<template>
	<view>
		<!-- <video id="myVideo" style="width: 100%;" v-if="Video" :src="Video" @error="videoErrorCallback" controls></video> -->
		<video class="video-class" :src="recordUrl" style="width: 100%;" id="videoPlay"
			:object-fit="objectFit" :loop="true" :autoplay="false" @timeupdate='videoUpdate' @ended="videoEnded"
			@loadedmetadata="videoTimeUpdateEvent" :controls="bool">
			<view class='process-container'>
				<view @click='videoOpreation' class="video-controls-play">
					<image :src="palyFlag ? imageUrl + 'play-icon/start.png' : imageUrl + 'play-icon/pause.png'"
						class='video-controls-icon'/>
				</view>
				<view class="currtime"></view>
				<view class='slider-container'>
					
				</view>
				<view class="druationTime">{{currtime}}/{{druationTime}}</view>
				<image
					:src="fullScreenFlag ? imageUrl + 'play-icon/videoBack.png' : imageUrl + 'play-icon/fullscreen.png'"
					class='video-controls-icon' @click='videoAllscreen'></image>
				<view class="shuiyin" @click='videoOpreation'>哇咔咔wakaka</view>
			</view>
			
			<!-- <view class='video_back'><image :src="fullScreenFlag ? '../../static/img/videoBack.png' : ''" @click='video_back'></image></view> -->
		</video><!-- contain -->
	</view>
</template>

<script>
	import imageConfig from '@/utils/images.js'
	export default {
		name: "videoPlay",
		// 在此声明 props
		props: {
			// 卡片背景色属性
			recordUrl: {
				// 值类型
				type: String,
				// 默认值
				default: ""
			}
		},
		data() {
			return {
				imageUrl:imageConfig.uploadImageUrl,
				fullScreenFlag: false,
				currtime: '00:00:00', //当前播放时间 字符串 计算后
				druationTime: '00:00:00', //总时间 字符串 计算后
				bool: false,
				sliderValue: 0, //控制进度条slider的值，
				updateState: false, //防止视频播放过程中导致的拖拽失效
				palyFlag: false,
				// recordUrl: this.recordUrl
				videoContext: null,
			}
		},
		onReady() {
			// 创建视频实例指向视频控件
			this.videoContext = uni.createVideoContext('videoPlay', this);
		},
		methods: {
			// 全屏+退出全屏
			videoAllscreen(e) {
				this.fullScreenFlag ? this.videoContext.exitFullScreen() : this.videoContext.requestFullScreen({direction: 90});
				// this.fullScreenFlag ? this.bool=false : this.bool=true;
				this.fullScreenFlag = !this.fullScreenFlag;
			},
			// 根据秒获取时间
			formatSeconds(a) {
				var hh = parseInt(a / 3600);
				var mm = parseInt((a - hh * 3600) / 60);
				if (mm < 10) mm = "0" + mm;
				var ss = parseInt((a - hh * 3600) % 60);
				if (ss < 10) ss = "0" + ss;
				if (hh < 10) hh = hh == 0 ? '' : `0${hh}:`;
				var length = hh + mm + ":" + ss;
				if (a >= 0) {
					return length;
				} else {
					return "00:00";
				}
			},
			//开始+暂停
			videoOpreation() {
				// this.palyFlag ? this.videoContext.play() : this.videoContext.pause();
				this.palyFlag = !this.palyFlag;
				
				if (!this.palyFlag) {
					if (this.videoContext) {
					  this.videoContext.play();
					}
				}
				
				if (this.palyFlag) {
					if (this.videoContext) {
					  this.videoContext.pause();
					}
				}
			},
			// 加载完成后触发
			videoTimeUpdateEvent(e) { // 播放进度改变
				// e.detail.currentTime为每次触发时,视频的当前播放时间
				let durationTime = Number(e.detail.duration);
				this.druationTime = this.formatSeconds(durationTime);
				console.log('视频总时长', durationTime)
			},
			// 播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
			videoUpdate(e) {
				this.currtime = this.formatSeconds(e.detail.currentTime);
			},
			//拖动过程中触发的事件
			sliderChanging(e) {
				//拖拽过程中，不允许更新进度条
				this.updateState = false;
			},
			// 拖动slider完成后触发
			sliderChange(e) {
				let duration = this.druationTime
				// var duration = this.live.liveRoomRecordList[0].duration;
				var second = e.detail.value / 100 * duration;
				if (duration) { //完成拖动后，计算对应时间并跳转到指定位置
					this.videoContext.seek(second);
					this.sliderValue = e.detail.value,
						this.updateState = true //完成拖动后允许更新滚动条
					this.druationTime = this.formatSeconds(duration);
					this.currtime = this.formatSeconds(second);
				} else {}
			}
		}
	}
</script>

<style>
	.process-container {
		width: 100%;
		padding: 1% 2% 1% 2%;
		height: 60rpx;
		max-height: 60rpx;
		position: absolute;
		bottom: 0rpx;
		left: 0;
		right: 0;
		/* z-index: 13; */
		display: flex;
		align-items: center;
		background: linear-gradient(-180deg, rgba(167, 204, 239, 0), rgba(167, 204, 239, 0.1) 10%, rgba(50, 50, 50, 1));
		;
	}
	.shuiyin{
		position: absolute;
		width: 50%;
		height: 50%;
		left: 0;
		bottom:350%;
		color: #ffffff;
		font-size: 45rpx;
		display: flex;
		opacity: 0.6;
		align-items: center;
		justify-content: center;
		transform: rotate(-30deg);
		/* z-index: 500; */
	}
	.process-container image {
		display: inline-block;
		flex: 1;
		max-width: 50rpx;
		max-height: 50rpx;
		text-align: center;
	}

	.slider-container {
		z-index: 13;
		height: 60rpx;
		margin-bottom: 10rpx;
		flex: 6;
		max-width: 58%;
	}

	.video-controls-play {
		width: 8%;
	}

	.currtime {
		color: #ffffff;
		font-size: 22rpx;
		width: 0%;
		height: 100%;
		line-height: 60rpx;
		text-align: center;
	}

	.druationTime {
		color: #ffffff;
		font-size: 22rpx;
		width: 24%;
		height: 100%;
		line-height: 60rpx;
		text-align: center;
	}

	.video_back {
		display: block;
		width: 60rpx;
		height: 60rpx;
		left: 5rpx;
		top: 15rpx;
		position: absolute;
		text-align: center;
		z-index: 19;
	}

	.video_back image {
		width: 44rpx;
		height: 44rpx;
	}
</style>